<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <ren-select
          v-model="dataForm.scenicLabels"
          dict-type="scenic_labels"
          placeholder="请选择标签"
          style="width: 100%"
        ></ren-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="dataForm.scenicName"
          placeholder="所属区域"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in scenicOptions"
            :key="item.id"
            :label="item.scenicName"
            :value="item.scenicName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="dataForm.isHot"
          placeholder="是否热门"
          clearable
          style="width: 100%"
        >
          <el-option label="是" :value="1"> </el-option>
          <el-option label="否" :value="0"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.scenicSpotName"
          placeholder="景区名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <SelectComponent
          v-model="dataForm.sort"
          placeholder="价格升序"
          :options="options"
        >
        </SelectComponent>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="$hasPermission('scenic:spot:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          >{{ $t("add") }}</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="$hasPermission('scenic:spot:delete')"
          type="danger"
          @click="deleteHandle()"
          >{{ $t("deleteBatch") }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="$hasPermission('scenic:spot:export')"
          type="primary"
          @click="exportHandle()"
          >{{ $t("export") }}</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      border
      @selection-change="dataListSelectionChangeHandle"
      :height="he"
    >
      <el-table-column
        type="selection"
        :show-overflow-tooltip="true"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="scenicSpotName"
        label="景区名称"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="scenicName"
        label="所属区域"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="startPrice"
        label="起步价格"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template v-slot:default="scope">
          {{ scope.row.startPrice == -1 ? "--" : scope.row.startPrice }}
        </template>
      </el-table-column>
      <el-table-column prop="rankTop" label="排行榜" sortable header-align="center" align="center"></el-table-column>
      <el-table-column prop="coverImage" label="封面图" align="center">
        <template v-slot:default="scope">
          <el-image :src="scope.row.coverImage" />
        </template>
      </el-table-column>
      <el-table-column
        prop="openDate"
        label="开放时间"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="景区地址"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="scenic_labels"
        label="特色标签"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.scenicLabelsList | delScenicLabel }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isHotName"
        label="是否热门"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        :label="$t('handle')"
        fixed="right"
        :show-overflow-tooltip="true"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasPermission('scenic:spot:update')"
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.spid)"
            >{{ $t("update") }}</el-button
          >
          <el-button
            v-if="$hasPermission('scenic:spot:info')"
            type="text"
            size="small"
            @click="lookDetail(scope.row.spid)"
            >查看</el-button
          >
          <el-button
            v-if="$hasPermission('scenic:spot:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.spid)"
            >{{ $t("delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
      @changeDisabled="disabled = false"
      :disabled="disabled"
    ></add-or-update>
    <!-- 详情 -->
    <look-detail
      v-if="lookDetailVisible"
      ref="lookDetail"
      @refreshDataList="getDataList"
    ></look-detail>
  </el-card>
</template>

<script>
var that;
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./isscenicspot-add-or-update";
import lookDetail from "./detail.vue";
import newsVue from '../../sys/news.vue';
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      disabled: false,
      mixinViewModuleOptions: {
        getDataListURL: "/scenic/isscenicspot/page",
        getDataListIsPage: true,
        exportURL: "/scenic/isscenicspot/export",
        deleteURL: "/scenic/isscenicspot",
        deleteIsBatch: true,
        deleteIsBatchKey: "spid",
      },
      he: "auto",
      scenicOptions: [],
      dataForm: {
        scenicLabels: "",
        scenicName: "",
        scenicSpotName: "",
        isHot: "",
        sort: "",
      },
      options: [
        {
          dictValue: 0,
          dictLabel: "降序",
        },
        {
          dictValue: 1,
          dictLabel: "升序",
        },
      ],
    };
  },
  watch: {
    dataList(newval,oldval){
      if(newval!=oldval){
        this.he = "auto";
        setTimeout(() => {
          this.he = "calc(100vh - 270px)";
        }, 500);
        
      }
    }
  },
  components: {
    AddOrUpdate,
    lookDetail,
  },
  created() {
    that = this;
    this.getScenicOptions();
  },
  mounted() {
    // setTimeout(() => {
    //   this.he = "calc(100vh - 270px)";
    // }, 1000);
  },
  filters: {
    delScenicLabel(val) {
      let str = "";
      if (val && val.length != 0) {
        for (let i = 0; i < val.length; i++) {
          str += that.$getDictLabel("scenic_labels", val[i]) + "，";
        }
        return str;
      }
    },
  },
  methods: {
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            console.log(res);
            this.scenicOptions = res.data;
          }
        });
    },
    viewHandle(spid) {
      this.addOrUpdateVisible = true;
      this.disabled = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.visible = true;
        this.$refs.addOrUpdate.dataForm.spid = spid;
        this.$refs.addOrUpdate.init();
      });
    },
  },
};
</script>
